<template>
  <v-app>
    <the-header>
      <template #leftDrawerIcon>
        <v-app-bar-nav-icon @click="drawerLeft = !drawerLeft" />
      </template>
    </the-header>
    <v-navigation-drawer v-model="drawerLeft" app clipped color="">
      <the-side-bar :link="getLink" :role="getCurrentUserRole" />
    </v-navigation-drawer>

    <v-main>
      <v-container fluid fill-height>
        <v-layout justify-center>
          <v-flex fill-height>
            <nuxt />
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
import DocumentService from '@/services/document.service'
import TheSideBar from '~/components/organisms/layout/TheSideBar'
import TheHeader from '~/components/organisms/layout/TheHeader'

export default {
  middleware: ['check-auth', 'auth', 'check-admin'],

  components: {
    TheSideBar,
    TheHeader
  },

  data() {
    return {
      drawerLeft: null,
      userId: null
    }
  },
  computed: {
    ...mapState('user', ['drawer']),
    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
  },
  async created() {
    this.setCurrentProject(this.$route.params.id)
    sessionStorage.setItem('projectId', this.$route.params.id)
    const tempUserId = localStorage.getItem('userId')
    const data = await DocumentService.getDefaultPage(tempUserId, this.$route.params.id)
    const currentPage = data.data != null ? data.data.completedAnnotationCount : 1
    localStorage.setItem('currentPage', currentPage)
    const checkpoint = {}
    checkpoint[this.$route.params.id] = currentPage
    localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
    // 2021.8.30 添加当前页状态控制
    // const obj = {
    //   userId: tempUserId,
    //   projectId: this.$route.params.id
    // }
    // this.setProjectCurrentPage(obj)
  },
  methods: {
    ...mapMutations('user', ['setDrawer']),
    ...mapActions('projects', ['setCurrentProject']),
    // 2021.8.30 添加默认加载页面状态管理
    ...mapActions('pagination', ['getProjectCurrentPage', 'setProjectCurrentPage']),
    ...mapGetters('pagination', ['getterStorageCurrentPage'])
  }
}
</script>
<style scoped>
.dialog {
  width: 100%;
}
</style>
